{% extends "base.html" %}

{% block title %}Seiya 数据分析系统 - 工作经验统计{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">首页</a></li>
    <li class="breadcrumb-item"><a href="/job">拉勾网职位数据分析</a></li>
    <li class="breadcrumb-item active" aria-current="page">工作经验统计</li>
  </ol>
</nav>

<div class="my-5" id="chart"></div>
{% endblock %}

{% block js %}
{{ super() }}
<script>
$.getJSON('/job/experience-stat.json', function (data) {
  var chart = new G2.Chart({
    container: 'chart',
    forceFit: true,
    height: 500
  });

  var total = data.map(v => v.count).reduce((a, b) => a + b);
  data.forEach(v => {
    v.percent = +(v.count / total).toFixed(2);
    if (v.experience == '0-0年') {
      v.experience = '不限';
    }
  });

  chart.source(data, {
    percent: {
      formatter: v => v * 100 + '%'
    }
  });
  chart.coord('theta', {
    radius: 0.75
  });
  chart.tooltip({
    showTitle: false,
    itemTpl: '<li><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>'
  });
  chart.intervalStack().position('percent').color('experience').label('percent', {
    formatter: (v, item) => item.point.experience + ': ' + v
  }).tooltip('experience*count', (experience, count) => {
    return {
      name: experience,
      value: count
    };
  }).style({
    lineWidth: 1,
    stroke: '#fff'
  });
  
  chart.render();
});
</script>
{% endblock %}